<template>
  <view class="container" v-if="carInfo.id">
    <view class="top-tips" v-if="carInfo.cars_search_status == 1">报价中</view>
    <view class="top-tips" v-if="carInfo.cars_search_status == 2">已报价</view>
    <view class="top-tips" v-if="carInfo.cars_search_status == 3"
      >买家已取消寻车</view
    >
    <view class="card-box" style="margin-top: 0">
      <view class="info-title">
        <text class="custom-title">寻车信息</text>
        <view class="tsjy" @click="complaintFunc">
          <image src="@/static/tsjy.png" mode=""></image>
          <text>投诉</text>
        </view>
      </view>
      <view class="car-name">{{ carInfo.cars_name }}</view>
      <view class="zdj">
        <text>指导价：{{ carInfo.guide_price }}万</text>
        <text>{{ carInfo.time }}</text>
      </view>
      <view class="aj-item zdj">
        <text>外观内饰</text>
        <text>{{ carInfo.appearance_interior }}</text>
      </view>
      <view class="aj-item zdj" style="margin-bottom: 49rpx">
        <text>上牌地区</text>
        <text>{{ carInfo.province_city }}</text>
      </view>
      <text class="custom-title">备注信息</text>
      <view class="tag-list">
        <view
          class="tag-item"
          v-for="(item, index) in carInfo.notes"
          :key="index"
          >{{ item }}</view
        >
      </view>
      <view class="describe" v-if="carInfo.describe">{{
        carInfo.describe
      }}</view>
    </view>
    <!-- 我的报价 -->
    <div class="my-quote" v-if="quotation_info.id">
      <view class="abxs">
        <text class="custom-title">我的报价</text>
        <!-- <view class="daojishi">还剩100小时失效</view> -->
      </view>
      <view class="jiage">
        <view class="price">
          <text>{{ quotation_info.price }}</text> 万
        </view>
        <view class="guide_price"
          >指导价：{{ quotation_info.guide_price }}万</view
        >
      </view>
      <view class="dj">
        <text>定金{{ quotation_info.deposit_price }}元</text>
        <text v-if="quotation_info.distance"
          >{{ quotation_info.distance }}内提车</text
        >
      </view>
      <view class="tag-list">
        <view
          v-for="(item, index) in quotation_info.label_name"
          :key="index"
          class="tag-item"
          >{{ item }}</view
        >
      </view>
    </div>
    <!-- 发布者信息 -->
    <view class="publisher_info" v-if="publisher_info.id" @click="dealerHandler">
      <image class="user-img" :src="publisher_info.imageurl" />
      <view class="user-center">
        <view class="user-name">
          <text>{{ publisher_info.users_name }}</text>
          <image :src="publisher_info.users_icon" mode="heightFix" />
        </view>
        <view class="timename">注册时长：{{ publisher_info.timename }}</view>
      </view>
      <view class="user-right" >
        <view v-if="publisher_info.is_follow == 0" @click.stop="follow">关注</view>
        <view v-else class="ygz" @click.stop="follow">已关注</view>
        <uni-icons type="right" size="18" color="#999"></uni-icons>
      </view>
    </view>
    <view class="baojia" v-if="quotation.record.length > 0">
      <view class="bj-title">
        <text>{{ quotation.supplier_num }}</text
        >家供应商参与<text>{{ quotation.quotation_num }}</text
        >次报价
      </view>
      <view class="bj-list">
        <view
          class="bj-item"
          v-for="(item, index) in quotation.record"
          :key="index"
        >
          <text class="bj-name">{{ item.release }}</text>
          <text class="bj-num">报价{{ item.quotation_num }}次</text>
          <text class="bj-time">{{ item.create_time }}</text>
        </view>
      </view>
    </view>
    <view class="bottom-btn" v-if="carInfo.cars_search_status == 2">
      <view class="ixoa" @click="cancelQuote">
        <uni-icons type="close" size="30"></uni-icons>
        取消报价
      </view>
      <view class="ixoa" @click="editQuote">
        <uni-icons type="compose" size="30"></uni-icons>
        修改报价
      </view>
      <view class="custom-btn" @click="makePhoneCall">联系卖家</view>
    </view>
    <!-- 投诉 -->
    <uni-popup ref="complaintPop" type="bottom">
      <view class="tousu">
        <view class="title">投诉</view>
        <view class="ts-list">
          <view
            class="ts-item"
            :class="{ active: currentTag.id === item.id }"
            v-for="(item, index) in complaintTagList"
            :key="index"
            @click="tsClick(item)"
            >{{ item.name }}</view
          >
        </view>
        <textarea
          :adjust-position="false"
          @blur="keyboardHeight = 0"
          :cursorSpacing="20"
          v-show="currentTag.id === 'other'"
          v-model="complaintContent"
          placeholder="请填写您要投诉的理由"
        ></textarea>
        <view class="custom-btn" @click="complaintConfirm">提交</view>
      </view>
      <view :style="{ height: keyboardHeight + 'px' }"></view>
    </uni-popup>
  </view>
</template>

<script>
import {
  newsCarsSearchQuotationListDetails,
  newsCarSearchQuotationCancel,
  followStoreUpdate,
  usedSearchComplaint,
  usedReportCarSearch,
} from "@/api/newCarSerach.js";
export default {
  data() {
    return {
      keyboardHeight: 0,
      users_id: uni.getStorageSync("login").id,
      carId: "",
      carInfo: {},
      quotation: {
        record: [],
      }, //供应商信息
      quotation_info: {}, //报价信息
      publisher_info: {}, //发布者信息
      complaintContent: "", //投诉理由
      complaintTagList: [],
      quotationList: [],
      currentTag: {},
    };
  },
  onLoad(option) {
    this.carId = option.carId;
    this.init();
  },
  onShow() {
    uni.onKeyboardHeightChange((res) => {
      this.keyboardHeight = res.height;
    });
  },
  methods: {
    init() {
      newsCarsSearchQuotationListDetails(this.users_id, this.carId).then(
        (res) => {
          this.carInfo = res.data.info;
          this.quotation = res.data.quotation || {};
          this.quotation_info = res.data.quotation_info;
          this.publisher_info = res.data.publisher_info;
        }
      );
    },
    backData() {
      this.init();
    },
    // 取消报价
    cancelQuote() {
      const that = this;
      uni.showModal({
        title: "温馨提示",
        content: "您确认取消报价？",
        confirmText: "确定",
        confirmColor: "#0E59EA",
        cancelText: "取消",
        cancelColor: "#333333",
        success: function (res) {
          if (res.confirm) {
            newsCarSearchQuotationCancel({
              id: that.quotation_info.id,
              users_id: that.users_id,
            }).then((res) => {
              if (res.code == 0) {
                uni.showToast({
                  title: "取消成功",
                  icon: "none",
                  duration: 500,
                });
                var pages = getCurrentPages();
                var prevPage = pages[pages.length - 2];
                prevPage.$vm.backData();
                uni.navigateBack({
                  delta: 1,
                });
              }
            });
          }
        },
      });
    },
    // 编辑报价
    editQuote() {
      uni.navigateTo({
        url: `/pages/home/newCarSearch/myQuotes/editQuote?quotationId=${this.quotation_info.id}&cars_name=${this.carInfo.cars_name}&source_type_name=${this.carInfo.source_type_name}&guide_price=${this.carInfo.guide_price}&carId=${this.carInfo.id}&model_two_id=${this.carInfo.model_two_id}`,
      });
    },
    // 电话联系
    makePhoneCall(item) {
      const that = this;
      wx.makePhoneCall({
        phoneNumber: that.carInfo.mobile,
        success: function () {
          // callHistory({
          //   vehicle_source: 3,
          //   vehicle_source_id: "",
          //   shop_users_id: "",
          //   users_id: "",
          //   phone: "",
          // });
        },
        fail: function () {},
      });
    },
	// 跳转发布者主页
	dealerHandler: function() {
		uni.navigateTo({
			url: "/pages/home/carDealer/carDealer?position=" + this.publisher_info.id
		})
	},
    // 关注发布者
    follow() {
      followStoreUpdate({
        users_id: this.users_id,
        shop_users_id: this.publisher_info.id,
      }).then((res) => {
        if (res.code == 0) {
          if (this.publisher_info.is_follow == 0) {
            uni.showToast({
              title: "关注成功",
              icon: "none",
            });
            this.publisher_info.is_follow = 1;
          } else {
            if (this.publisher_info.is_follow == 1) {
              uni.showToast({
                title: "取消关注成功",
                icon: "none",
              });
              this.publisher_info.is_follow = 0;
            }
          }
        }
      });
    },
    // 投诉
    complaintFunc() {
      usedSearchComplaint("1").then((res) => {
        this.complaintTagList = res.data;
        this.complaintTagList.push({
          id: "other",
          name: "其他",
        });
        this.currentTag = {};
        this.$refs.complaintPop.open();
      });
    },
    tsClick(item) {
      this.currentTag = item;
      this.complaintContent = "";
    },
    // 确认提交意见
    complaintConfirm() {
      let content = "";
      if (this.currentTag.id === "other") {
        content = this.complaintContent;
      } else {
        content = this.currentTag.name;
      }
      if (content) {
        usedReportCarSearch({
          state: "1",
          users_id: this.users_id,
          car_search_id: this.carId,
          content: content,
        }).then((res) => {
          if (res.code == 0) {
            uni.showToast({
              title: "投诉成功",
              duration: 1000,
            });
            this.$refs.complaintPop.close();
          }
        });
      } else {
        uni.showToast({
          title: "请选择投诉理由",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.info-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tsjy {
    border: 2rpx solid #e6e6e6;
    border-radius: 50rpx;
    padding: 9rpx 19rpx;
    display: flex;
    align-items: center;
    image {
      width: 24rpx;
      height: 24rpx;
      margin-right: 10rpx;
    }
    text {
      font-size: 26rpx;
      line-height: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
    }
  }
}
.custom-title {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #05052a;
  line-height: 18rpx;
  background-image: url(/static/bac-small.png);
  background-size: 90rpx 33rpx;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.top-tips {
  text-align: center;
  height: 60rpx;
  line-height: 60rpx;
  background: #e6efff;
  font-size: 24rpx;
  color: #2d56c5;
}
.container {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  padding-bottom: 180rpx;
  .card-box {
    padding: 28rpx 30rpx;
    margin-top: 20rpx;
    background-color: #fff;
  }
  .car-name {
    font-weight: 800;
    margin: 25rpx 0;
  }
  .zdj {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30rpx;
  }
  .aj-item {
    color: #999;
    margin-top: 25rpx;
  }
  .tag-list {
    .tag-item {
      margin-top: 29rpx;
      display: inline-block;
      margin-right: 20rpx;
      height: 54rpx;
      line-height: 54rpx;
      padding: 0 36rpx;
      background: #f7f7f7;
      border-radius: 27rpx;
    }
  }
  .describe {
    margin-top: 20rpx;
    font-size: 24rpx;
  }
  .asdasdad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    view {
      display: flex;
      align-items: center;
    }
    .view-more {
      color: #0e59ea;
      font-size: 24rpx;
      margin-right: 10rpx;
    }
  }
  // 我的报价
  .my-quote {
    margin: 20rpx 0 20rpx;
    background-color: #fff;
    padding: 28rpx 30rpx 38rpx;
    .abxs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .daojishi {
        color: red;
      }
    }
    .jiage {
      display: flex;
      align-items: flex-end;
      margin-top: 40rpx;
      .price {
        font-size: 36rpx;
        text {
          font-weight: 600;
          color: #ed2f2f;
          margin-right: 5rpx;
        }
      }
      .guide_price {
        margin-left: 20rpx;
        font-size: 24rpx;
        color: #333;
        margin-bottom: 4rpx;
      }
    }
    .dj {
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #333;
      text {
        margin-right: 10rpx;
      }
    }
    .tag-item {
      margin-top: 20rpx;
      background-color: #f7f8fa;
    }
  }
  // 发布者信息
  .publisher_info {
    background-color: #fff;
    margin-top: 20rpx;
    padding: 22rpx 30rpx;
    display: flex;
    align-items: center;
    .user-img {
      width: 76rpx;
      height: 76rpx;
      border-radius: 100%;
    }
    .user-center {
      flex: 1;
      margin: 0 30rpx 0 18rpx;
      .user-name {
        text {
          font-size: 28rpx;
          font-weight: 800;
        }
        image {
          height: 30rpx;
          margin-left: 17rpx;
          max-width: 100rpx;
        }
      }
      .timename {
        margin-top: 15rpx;
        color: #999;
        font-size: 24rpx;
      }
    }
    .user-right {
      display: flex;
      align-items: center;
      justify-content: center;
      view {
        white-space: nowrap;
        height: 50rpx;
        line-height: 48rpx;
        border: 1px solid #2d56c5;
        border-radius: 25rpx;
        color: #2d56c5;
        padding: 0 28rpx;
        margin-right: 15rpx;
        &.ygz {
          color: #999;
          border-color: #999;
        }
      }
    }
  }
}
// 投诉
.tousu {
  background-color: #fff;
  width: 100%;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  padding: 40rpx 28rpx 30rpx;
  .title {
    text-align: center;
    font-size: 32rpx;
    font-weight: 800;
  }
  .ts-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rpx;
    .ts-item {
      font-size: 24rpx;
      padding: 0 56rpx;
      text-align: center;
      height: 60rpx;
      line-height: 60rpx;
      background: #f7f8fa;
      border-radius: 30rpx;
      margin-right: 15rpx;
      margin-bottom: 30rpx;
      &.active {
        background: #0e59ea;
        color: #fff;
      }
    }
  }
  textarea {
    width: 100%;
    margin: 0 0 50rpx;
    height: 177rpx;
    background: #f3f3f3;
    border-radius: 14rpx;
    padding: 15rpx 20rpx;
  }
}
// 反馈
.complaint {
  background-color: #fff;
  width: 100%;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  padding: 40rpx 28rpx 30rpx;
  .title {
    text-align: center;
    font-size: 32rpx;
    font-weight: 800;
  }
  .wfaa {
    margin-top: 40rpx;
  }
  .list {
    display: flex;
    align-items: center;
    gap: 33rpx;
    view {
      margin-top: 29rpx;
      width: 25%;
      box-sizing: border-box;
      font-size: 24rpx;
      text-align: center;
      height: 50rpx;
      line-height: 46rpx;
      border: 1px solid #999999;
      border-radius: 25rpx;
      &.active {
        color: #fff;
        background-color: #0e59ea;
        border-color: #0e59ea;
      }
    }
  }
  textarea {
    width: 100%;
    margin: 40rpx 0 0;
    height: 150rpx;
    background: #f3f3f3;
    border-radius: 14rpx;
    padding: 15rpx 20rpx;
  }
  .btn {
    margin-top: 50rpx;
    flex: 1;
    width: 100%;
    color: #fff;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    background: #0e59ea;
    border-radius: 14rpx;
    font-size: 28rpx;
  }
}
.bottom-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  height: 162rpx;
  padding: 0 28rpx;
  box-shadow: 0rpx -6rpx 4rpx 0rpx rgba(204, 204, 204, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30rpx;
  .ixoa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .custom-btn {
    flex: 1;
    background-color: #0e59ea;
    color: #fff;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 47rpx;
    font-size: 28rpx;
  }
}
.custom-btn {
  flex: 1;
  width: 100%;
  color: #fff;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  background: #0e59ea;
  border-radius: 14rpx;
  font-size: 28rpx;
}
.baojia {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 28rpx 30rpx;
  .bj-title {
    font-weight: 800;
    text {
      color: #0e59ea;
    }
  }
  .bj-list {
    .bj-item {
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      display: flex;
      align-items: center;
      .bj-num {
        color: #0e59ea;
        margin-left: 30rpx;
        font-weight: 600;
      }
    }
  }
}
</style>
